<template>
    <el-container>
        <!--header-->
        <el-header>
            <el-row type="flex" class="row-bg" justify="space-between">
                <el-col>
                    <h1>职业列表</h1>
                </el-col>
                <el-col style="text-align: right;">
                    <el-button type="primary" @click="create">新增</el-button>
                    <el-button @click="filterDialogVisible = true">筛选</el-button>
                </el-col>

            </el-row>
        </el-header>
        <el-container>
            <el-main>
                <el-dialog title="筛选" :visible.sync="filterDialogVisible">
                    <careers-filter @complete="confirmFilter"></careers-filter>
                </el-dialog>
                <el-table :data="careers" stripe v-loading="loading" highlight-current-row>
                    <el-table-column prop="id" label="#" width="80"></el-table-column>
                    <el-table-column prop="title" label="标题"></el-table-column>
                    <el-table-column prop="skills_count" label="技能数量"></el-table-column>
                    <el-table-column prop="description" label="介绍" width="500"></el-table-column>

                    <el-table-column fixed="right" label="操作" width="350">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" size="small">编辑</el-button>
                            <el-button v-if="!scope.row.deleted_at" @click="destroy(scope.row)" type="danger"
                                       size="small">删除
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <!--pagination-->
                <div class="block">
                    <el-pagination
                            @size-change="pageSizeChange"
                            @current-change="currentPageChange"
                            background
                            :current-page="pagination.current_page"
                            :page-sizes="[15, 30, 50, 100]"
                            :page-size="pagination.per_page"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>

    </el-container>
</template>

<script>
    import CareersFilter from "../components/CareersFilter";

    export default {
        components: {CareersFilter},
        mixins: [],
        data() {
            return {
                careers: [],
                loading: true,
                pagination: {
                    current_page: null,
                    per_page: null,
                    total: 0,
                },
                filterForm: {},
                filterTags: [],
                filterDialogVisible: false,
            }
        },

        methods: {
            getCareersPromise() {
                return axios.get('careers', {
                    params: {
                        page: this.pagination.current_page,
                        per_page: this.pagination.per_page,
                        title: this.filterForm.title,
                        description: this.filterForm.description,
                        trashed: this.filterForm.trashed,
                    }
                });
            },
            getCareers() {
                this.loading = true;
                this.getCareersPromise().then((response) => {
                    this.careers = response.data.data;
                    this.pagination = {
                        current_page: parseInt(response.data.meta.current_page),
                        per_page: parseInt(response.data.meta.per_page),
                        total: parseInt(response.data.meta.total),
                    };
                    this.loading = false;
                })
            }, create() {
                this.$router.push({name: 'career-create'});
            }, edit(row) {
                this.$router.push({name: 'career-edit', params: {career: row.id}});
            }, destroy(row) {
                this.$alert('此操作将删除职业【' + row.title + '】, 是否继续?').then(() => {
                    this.deletePromise(row).then(() => {
                        this.$message.success('删除成功!');
                        this.getCareers();
                    });
                });
            }, deletePromise(row) {
                return axios.delete('careers/' + row.id);
            }, pageSizeChange(per_page) {
                this.pagination.current_page = 1;
                this.pagination.per_page = per_page;
                this.getCareers();
            }, currentPageChange(current_page) {
                this.pagination.current_page = current_page;
                this.getCareers();
            }, confirmFilter(form, tags) {
                this.filterForm = form;
                this.filterTags = tags;
                this.filterDialogVisible = false;
                this.pagination.current_page = 1;
                this.getCareers();
            }
        },
        mounted() {
            this.getCareers();
        }
    }
</script>

